<template>
  <el-dialog title="场次特征值" v-model="dialogVisible" width="70%">
    <el-table border :data="featureList" :span-method="objectSpanMethod" class="table-box">
      <el-table-column
        prop="blknm"
        label="预报断面"
        align="center"
        show-overflow-tooltip
        width="200"
      />
      <el-table-column
        prop="proj"
        label="计算项"
        align="center"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column prop="mxq" label="洪峰流量" align="center" width="100"></el-table-column>
      <el-table-column prop="mxt" label="洪现时间" align="center" width="200"></el-table-column>
      <el-table-column prop="mxz" label="洪峰水位" align="center" width="100"></el-table-column>
      <el-table-column prop="v" label="洪量" align="center"></el-table-column>
      <el-table-column prop="ord" label="排序" align="center"></el-table-column>
    </el-table>
  </el-dialog>
</template>
<script setup>
import { ref, defineExpose } from 'vue'
const dialogVisible = ref(false)
const featureList = ref([])
const handleOpenDialog = (list) => {
  featureList.value = list
  dialogVisible.value = true
}
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    if (rowIndex % 4 === 0) {
      return {
        rowspan: 4,
        colspan: 1
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
}
defineExpose({ handleOpenDialog })
</script>
<style lang="less" scoped>
.el-table {
  height: 60vh;
}
</style>
